@col-padding: 3px;
@row-padding: 3px;
@bg-color-light: #f5f5f5;
@bg-color-dark: #e8e8e8;
@bd-color: #ddd;
@border-radius: 2px;
@font-size: 14px;
@major-color: #333;
@db-row-padding: 4px;
@db-col-padding: 8px;
@tree-item-color: #428bca;
html {
  height: 100%;
  body {
    .treeview {
      .node-selected {
        background-color: lighten(@major-color, 20%) !important;
      }
    }
    .dragging-item {
      position: absolute;
      &.dragging-treeview {
        opacity: 0.8;
        background-color: @major-color;
        color: white;
        padding: @row-padding - 1 @col-padding - 1;
        border-radius: @border-radius;
        border: solid 1px darken(@bd-color, 30%);
        cursor: pointer;
      }
    }
    height: 100%;
    //overflow: hidden;
    background-color: @bg-color-light;
    .client {
      width: 100%;
      height: 100%;
    }
    .frame {
      //transition:width 0.2s, left 0.2s;
      //float: left !important;
      //&.ng-show {
      //  position: relative;
      //  left: 0;
      //}
      //&.ng-hide {
      //  position: relative;
      //  width: 0;
      //  left: 0;
      //}
    }
    &.client-screen {
      //padding-top: 50px + @row-padding * 2;
      padding-top: 50px;
      .client .frame-primary {
        //padding: 0 @col-padding @row-padding @col-padding;
        padding: 0 !important;
      }
      .client .frame-default {
        padding: 0 !important;
      }
    }
    &.full-screen {
      padding-top: 50px !important;
      .client .frame-primary {
        padding: 0 !important;
      }
      .client .frame-default {
        padding: 0 !important;
      }
    }
    .navbar {
      margin-bottom: 0;
    }
    .tab-content {
      .tab-pane {
        .panel {
          border-radius: 0 0 @border-radius @border-radius;
        }
      }
    }
    .treeview {
      .list-group {
        margin-bottom: 0;
        box-shadow: none;
        .list-group-item {
          padding: @row-padding @col-padding;
          background-color: @bg-color-dark;
          &:first-child, &:last-child {
            border-radius: 0;
          }
        }
      }
    }
    .panel {
      background-color: @bg-color-dark;
      margin-bottom: 0;
      .panel-heading {
        padding: @row-padding @col-padding;
      }
      .panel-body {
        padding: @row-padding @col-padding;
      }
    }
    .nav-tabs {
      border: 1px solid @bd-color;
      //padding: @row-padding 0 0 @col-padding;
      background-image: linear-gradient(to right, @bg-color-light 0, @bg-color-dark 100%);
      //background-color: @bg-color-light;
      >li {
        >a {
          border-radius: 0;
          padding: @row-padding @col-padding;
          color: lighten(@major-color, 30%);
          background-color: @bg-color-dark;
          border: none;
          margin-right: 0;
          button.close {
            padding-left: @col-padding * 4;
          }
        }
        &.active {
          >a, >a:hover, >a:focus {
            border-top: none;
            border-left: none;
            //border-bottom: none;
            background-color: @bg-color-dark;
            //border: 1px solid darken(@bg-color-dark, 10%);
            border-bottom-color: @bg-color-dark;
          }
        }
        &.open {
          >a {
            border-color: transparent !important;
            box-shadow: none;
          }
        }
        &.config {
          padding-left: @row-padding;
          padding-right: @row-padding;
        }
      }
    }
    .gen-col-sm-(12, sm);
    .gen-col-sm-(12, lg);
    .gen-col-sm-(12, xs);
    .gen-col-sm-(@n, @size, @i: 1) when (@i =< @n) {
      .col-@{size}-@{i} {
        padding-left: @col-padding;
        padding-right: @col-padding;
        padding-bottom: @row-padding;
      }
      .gen-col-sm-(@n, @size, (@i + 1));
    }
    .dashboard {
      border-top: none;
      //overflow: auto !important;
      .panel-heading {
        padding: @db-row-padding @db-col-padding !important;
        background-image: linear-gradient(to bottom, @bg-color-dark 0, @bg-color-dark 100%);
        .btn-group {
          .glyphicon {
            line-height: sqrt(2);
          }
        }
      }
      .panel-body {
        padding: @db-row-padding @db-col-padding !important;
      }
      .create-frame {
        border: 2px dashed darken(@bd-color, 10%);
        color: darken(@bg-color-dark, 30%);
        font-size: @font-size * 2;
        padding: @db-row-padding * 2 @db-col-padding * 2;
        display: table;
        &:before {
          float: left;
          content: "+";
          font-size: @font-size * 4;
          //padding-right: @db-col-padding * 2;
        }
        span {
          display: table-cell;
          vertical-align: middle;
        }
      }
      .db-frame {
        border: 2px dashed darken(@bd-color, 10%);
        margin-top: @row-padding;
        //margin-bottom: @row-padding;
      }
    }
    .btn {
      padding: @row-padding @col-padding * 4;
      border-radius: @border-radius;
    }
  }
}